<template>
	<div class="wrapper">
		<img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/user.png" />
		<div class="wrapper__input">
			<input class="wrapper__input__content" placeholder="请输入用户名" v-model="username" />
		</div>
		<div class="wrapper__input">
			<input
				type="password"
				class="wrapper__input__content"
				autocomplete="new-password"
				v-model="password"
				placeholder="请输入密码"
			/>
		</div>
		<div class="wrapper__input">
			<input
				type="password"
				class="wrapper__input__content"
				placeholder="请确认密码"
				v-model="ensurement"
			/>
		</div>
		<div class="wrapper__register--button" @click="confirmRegister">注册</div>
		<div class="wrapper__login--link" @click="toLogin">已有帐号去登录</div>
		<Toast :show="show" :text="text" />
	</div>
</template>

<script>
	import { defineComponent, reactive, toRefs } from 'vue'
	import { useRouter } from 'vue-router'
	import { post } from '../../utils/request'
	import Toast, { useToastEffect } from '../../components/Toast'

	const ERR_OK = 0

	const useRegisterEffect = (showToast) => {
		const router = useRouter()
		const params = reactive({
			username: '',
			password: '',
			ensurement: ''
		})
		const confirmRegister = async() => {
			try {
				const result = await post('/api/user/register', {
					username: params.username,
					password: params.password
				})
				if (result.errno === ERR_OK) {
					showToast('注册成功')
					setTimeout(() => {
						router.push('/login')
					}, 2e3)
		        } else {
		            showToast('注册失败')
		        }
			} catch (e) {
				showToast('未知的错误')
				throw new Error('Unexpected Error: ' + JSON.stringify(e))
			}
		}
		const { username, password, ensurement } = toRefs(params)
		return {
			username,
			password,
			ensurement,
			confirmRegister
		}
	}

	const useSkipLoginEffect = () => {
		const router = useRouter()
		const toLogin = () => {
			router.push({
				name: 'Login'
			})
		}
		return {
			toLogin
		}
	}

	export default defineComponent({
		name: 'Register',
		components: { Toast },
		setup() {
			const { show, text, showToast } = useToastEffect()
			const {
				username,
				password,
				ensurement,
				confirmRegister
			} = useRegisterEffect(showToast)
			const { toLogin } = useSkipLoginEffect()
			return {
				show,
				text,
				username,
				password,
				ensurement,
				confirmRegister,
				toLogin
			}
		}
	})
</script>

<style lang="scss" scoped>
	@import "../../style/variable.scss";

	.wrapper {
		position: absolute;
		left: 0;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		&__img {
			display: block;
			width: .66rem;
			height: .66rem;
			margin: 0 auto .4rem auto;
		}
		&__input {
			height: .48rem;
			margin: 0 .4rem .16rem .4rem;
			padding: 0 .16rem;
			background: #f9f9f9;
			border: .01rem solid rgba(0, 0, 0, 0.1);
			border-radius: .06rem;
			&__content {
				width: 100%;
				border: none;
				outline: none;
				line-height: .48rem;
				background: none;
				font-size: .16rem;
				color: $content-notice-fontcolor;
				&::placeholder {
					color: $content-notice-fontcolor;
				}
			}
		}
		&__register--button {
			margin: .32rem .4rem 0 .4rem;
			line-height: .4rem;
			background: #0091ff;
			box-shadow: 0 .04rem .08rem 0 rgba(0, 145, 255, 0.32);
			border-radius: .04rem;
			color: #fff;
			font-size: .16rem;
			text-align: center;
		}
		&__login--link {
			font-size: .14rem;
			color: $content-notice-fontcolor;
			text-align: center;
			margin: .2rem 0 0 0;
		}
	}
</style>
